<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>

<!-- 表格高亮 -->
	<style type="text/css">
			
			tr td,tr th{
				
				width: 200px;
				line-height: 30px;
				text-align: center;
			}
		
		
	</style>


		<!--css-->
		<!-- 表格 -->
		<style type="text/css">
			table tr th {
				background: #f7f7f7;
			}

			table,
			table tr th,
			table tr td {
				border: 1px solid #eaeaea;
			}

			table {
				min-width: 200px;
				min-height: 25px;
				line-height: 25px;
				text-align: center;
				border-collapse: collapse;
			}
		
		</style>
	</head>
	<body>
		<div id="app">
			<button-counter></button-counter>
			<!-- <blog-post title="My journey with Vue"></blog-post>
			<blog-post title="Blogging with Vue"></blog-post>
			<blog-post title="Why Vue is so fun"></blog-post> -->
			<blog-post
			  v-for="item in list"
			  v-bind:key="item.id"
			  v-bind:list="item"
			  v-bind:title="item.title"
			   v-on:change="changebig"
			   :style="{fontSize: fontsize+'px'}"
			></blog-post>
			<div haha="自定义"></div>
			
		</div>
		
		<!-- js最后引入-->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.component('button-counter', {
			  data: function () {
			    return {
			      count: 0
			    }
			  },
			  template: `<button v-on:click="count++">
			  You clicked me {{ count }} times.
			  </button>`
			})
			Vue.component('blog-post', {
				data: function () {
				  return {
				  }
				},
			  props: ['title','list'],
			  template: `
			  <div>
			  <h3>{{ title }}{{ list.name }}</h3>
			  <button v-on:click="$emit('change',30)">放大字体</button>
			  </div>
			  `
			})
		
			var app = new Vue({
				el: '#app',
				data: {
					message: '书籍',
					num1: 1,
					fontsize: 20,
					list: [{
						    isChecked: false,
							id: 1,
							date: '2010-10',
							price: 98,
							num: 1,
							name: 'JAVA',
							title: 'JAVA',
						},
						{
							isChecked: false,
							id: 2,
							date: '2011-10',
							price: 100,
							num: 1,
							name: 'PYTHON',
							title: 'JAVA2',
						},
						{
							isChecked: false,
							id: 3,
							date: '2012-10',
							price: 111,
							num: 1,
							name: 'PHP',
							title: 'JAVA3',
						},
						{
							isChecked: false,
							id: 4,
							date: '2013-10',
							price: 222,
							num: 1,
							name: '什么',
							title: 'JAVA4',
						}
					],

				},
				methods:{
					changebig: function(value){
						console.log("changebig");
						this.fontsize=value+this.fontsize;
					}
				}
			




			})
		</script>
		<!-- 高亮js -->
	</body>
</html>
